<template>
	<view>
		<fui-dialog :show="dialog" title="提示" content="最多只能设置3个角色！" :buttons="buttons" @click="onTap"></fui-dialog>
		<view style="margin:30rpx">身份一年只能修改2次，当前剩余1次，请谨慎选择！</view>
		<view style="margin:30rpx;height:180rpx;">
			<view>已选择（最多选择3个身份，第1个为主身份，长按可拖动排序）</view>
			<view style="margin-top: 20rpx;">
				<BasicDrag v-model="selectedLabel" itemKey="LabelName" direction="all" height="100"
					@handleEnd="handleEnd" @deleteLabel="deleteLabel"></BasicDrag>

				<!-- <fui-drag :width="600" custom :itemList="selectedLabel" :columns="3"  isDrag :styles="styles" :itemHeight="180" @end="moveEnd" @change="onMoveTouch" @deleteLabel="deleteLabel">
					<template v-slot="{ model,width,height,index }">
						<view class="dragItem" @click="deleteLabel(index)">
							<text v-if="index == 0" style="width:60rpx;float:left;background:#FF6600;border-radius:15rpx;">主</text>
							<text>{{model.LabelName}}</text>
						</view>
					</template>
				</fui-drag> -->
			</view>
		</view>
		<view style="margin:30rpx;margin-top:200rpx;height:200rpx;">
			<view>艺人</view>
			<view>
				<view class="label" v-for="(item,index) of artisterLabel" :key="index"
					:style="{backgroundColor:(item.selected?'#FFDD00':'#FFFFCC')}" @click="setArtLabel('a',index)">
					{{item.LabelName}}
				</view>
			</view>
		</view>
		<view style="margin:30rpx;height:300rpx;">
			<view>非艺人</view>
			<view>
				<view class="label" v-for="(item,index) of notArtisterLabel" :key="index"
					:style="{backgroundColor:(item.selected?'#FFDD00':'#FFFFCC')}" @click="setArtLabel('b',index)">
					{{item.LabelName}}
				</view>
			</view>
		</view>
		<view class="saveBtns">
			<fui-button background="#FFDD00" width="95%" height="70rpx" color="#000" class="saveBtn"
				@click="saveMyRole">保存</fui-button>
		</view>
	</view>
</template>

<script>
	import BasicDrag from '../components/basic-drag/index.vue';
	export default {
		components: {
			BasicDrag
		},
		data() {
			return {
				dialog: false,
				styles: {
					//item项类型，可选值：1-图片元素，2-标题分组元素
					type: 2,
					//item项padding值，单位rpx
					padding: 20,
					margin: 20,
					//item项背景色
					background: "#CCC",
					//字体大小，单位rpx，type=2时有效
					size: 30,
					//字体颜色，type=2时有效
					color: '#181818',
					//是否显示删除图标
					isDel: true,
					//删除图标颜色
					delColor: '#FF2B2B',
					//slide图标颜色，type=2时有效
					slideColor: '#B2B2B2'
				},
				buttons: [{
					text: '确定',
					color: '#FF2B2B'
				}],
				selectedLabel: [],
				artisterLabel: [],
				notArtisterLabel: [],
				MoveID: 0,
				isDrag: false,
				dragList: [],
			};
		},
		onLoad() {
			this.getUserRole();
		},
		onShow() {
			// this.getUserRole();
		},
		methods: {
			getUserRole() {
				this.$httpost('/UserAction/getUserRole', {}).then(res => {
					// console.log('接口返回数据：', res);
					if (res.code == 200) {
						this.isDrag = false;
						res.data.UserRole.forEach(val => {
							this.$set(val, 'selected', true);
						});

						this.selectedLabel = res.data.UserRole;
						// this.MoveID = res.data.UserRole[0].LabelID;

						// console.log('selectedLabel', this.selectedLabel);

						res.data.ArtisterLabel.forEach((val, index) => {
							let isSelected = this.selectedLabel.filter(item => item.LabelID == val.LabelID)
								.length;
							if (isSelected != 0) {
								res.data.ArtisterLabel[index]['selected'] = true;
							} else {
								res.data.ArtisterLabel[index]['selected'] = false;
							}
						});

						this.artisterLabel = res.data.ArtisterLabel;

						// console.log('artisterLabel', this.artisterLabel);

						res.data.NotArtisterLabel.forEach((val, index) => {
							let isSelected = this.selectedLabel.filter(item => item.LabelID == val.LabelID)
								.length;
							if (isSelected != 0) {
								res.data.NotArtisterLabel[index]['selected'] = true;
							} else {
								res.data.NotArtisterLabel[index]['selected'] = false;
							}
						});

						this.notArtisterLabel = res.data.NotArtisterLabel;

						// console.log('notArtisterLabel', this.notArtisterLabel);
					}


				});
			},
			onMoveTouch(event) {
				// console.log('拖动过程', event);
				// this.selectedLabel = event.itemList;
			},
			moveEnd(e) {
				// console.log('拖动结束', e)
				let itemList = e.itemList;
				// this.selectedLabel = e.itemList;
				// itemList.forEach(function(item,index,array){
				// 	this.selectedLabel.push(item);
				// });
				// this.isDrag = true;
				// this.MoveID = e.itemList[0].LabelID;
				// setTimeout(()=>{
				// 	 this.selectedLabel = e.itemList;
				// },0)
				// this.dragList = e.itemList

				// // console.log(this.selectedLabel);
			},
			onTap() {
				this.dialog = false;
			},
			setArtLabel(type, index) {
				this.isDrag = false;
				let setLabel;

				if (type == 'a') {
					setLabel = this.artisterLabel[index];
				} else {
					setLabel = this.notArtisterLabel[index];
				}

				this.$set(setLabel, 'type', type);
				this.$set(setLabel, 'yindex', index);

				// console.log('setLabel', setLabel);

				if (this.selectedLabel.filter(item => item.LabelID == setLabel.LabelID).length > 0) {
					this.selectedLabel = this.selectedLabel.filter(item => item.LabelID != setLabel.LabelID)
					if (type == 'a') {
						this.artisterLabel[index].selected = false;
					} else {
						this.notArtisterLabel[index].selected = false;
					}
				} else {
					if (this.selectedLabel.length > 2) {
						this.dialog = true;
					} else {
						this.selectedLabel.push(setLabel);
						if (type == 'a') {
							this.artisterLabel[index].selected = true;
						} else {
							this.notArtisterLabel[index].selected = true;
						}
					}
				}
				this.dragList = this.selectedLabel
				// console.log('selectedLabel', this.selectedLabel);
				// console.log('dragList', this.dragList);
			},
			deleteLabel(index) {
				const delLabel = this.selectedLabel[index];
				delLabel.selected = false;
				// console.log('delLabel', delLabel);
				if (delLabel.type == 'a') {
					this.artisterLabel[delLabel.yindex].selected = false;
				}
				if (delLabel.type == 'b') {
					this.notArtisterLabel[delLabel.yindex].selected = false;
				}

				this.selectedLabel = this.selectedLabel.filter(item => item.LabelID != delLabel.LabelID)
			},

			handleEnd(event) {
				// console.log('envent', event)
				this.dragList = event;
			},
			saveMyRole() {
				// console.log('this.dragList', this.dragList)
				// 返给上一层 选择的结果数据
				uni.$emit('resultData', this.dragList)
				// // console.log('selectedLabel', this.selectedLabel)
				// if (this.isDrag) this.selectedLabel = this.dragList;

				if (this.dragList[0].type == 'a') {
					uni.showModal({
						title: '温馨提醒',
						content: '当前设置的主身份是【艺人身份】，您的主页将会以【艺人主页】形式展示',
						success: (res) => {
							if (res.confirm) {
								this.$httpost('/UserAction/saveUserRole', {
									"UserRoleLabel": this.dragList
								}).then(res => {
									// console.log('接口返回数据：', res);
									uni.navigateBack()
								});
							}
						}
					})
				} else if (this.dragList[0].type == 'b') {

					const isArtister = this.dragList.some(item => item.type == 'a');

					if (isArtister) {
						uni.showModal({
							title: '温馨提醒',
							content: '当前设置的身份包含【艺人身份】，您的主页将会以【艺人主页】形式展示',
							success: (res) => {
								if (res.confirm) {
									this.$httpost('/UserAction/saveUserRole', {
										"UserRoleLabel": this.dragList
									}).then(res => {
										// console.log('接口返回数据：', res);
										uni.navigateBack()
									});
								}
							}
						})
					} else {
						uni.showModal({
							title: '温馨提醒',
							content: '当前设置的身份是【非艺人身份】，您的主页将会以【非艺人主页】形式展示',
							success: (res) => {
								if (res.confirm) {
									this.$httpost('/UserAction/saveUserRole', {
										"UserRoleLabel": this.dragList
									}).then(res => {
										// console.log('接口返回数据：', res);
										uni.navigateBack()
									});
								}
							}
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.dragItem {
		float: left;
		background-color: #FFDD00;
		color: #000;
		margin: 20rpx;
		width: 150rpx;
		text-align: center;
		border-radius: 15rpx;
		height: 60rpx;
		line-height: 60rpx;
	}

	.label {
		width: auto;
		float: left;
		margin: 10rpx;
		padding: 10rpx;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		// font-size: 22rpx;

	}

	.saveBtns {
		width: 100vw;
		position: fixed;
		z-index: 100;
		bottom: 0rpx;
		padding: 20rpx;
	}

	.saveBtn {
		margin: auto;
	}
</style>